<template>
  <div>
    <my-header></my-header>
    <div class="content">
      <!-- 0. 面包屑导航栏 -->
      <div class="content_breadcrumb">
        <ul class="su_breadcrumb">
          <li class="su_breadcrumb-item">
            <router-link to="#">结婚</router-link>
          </li>
          <li class="su_breadcrumb-item">
            <router-link :to="'/picture'">结婚图片</router-link>
          </li>
          <li class="su_breadcrumb-item">
            婚纱照
            <span class="hover_span"></span>
            <div class="content_list">
              <div>
                <div v-for="(labelitem, i) of label" :key="i">
                  <span>{{ labelitem.title }}</span>
                  <ul>
                    <li>
                      <router-link to="#">全部</router-link>
                    </li>
                    <li v-for="(labeldetails, k) of searcharr[i]" :key="k">
                      <router-link :to="`/picture/${homekeywords}/1`">{{
                        labeldetails
                      }}</router-link>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </li>
        </ul>
        <div class="share_qrcode">
          <span>分享:</span>
          <router-link to="#"
            ><img src="../.././public/img/sukai/QQ.png" alt=""
          /></router-link>
          <router-link to="#"
            ><img src="../.././public/img/sukai/新浪微博.png" alt=""
          /></router-link>
          <router-link to="#"
            ><img src="../.././public/img/sukai/微信.png" alt=""
          /></router-link>
          <!-- <div class="qrcode">
            <div>
              <div id="qrcode"></div>
            </div>
          </div> -->
        </div>
      </div>
      <!-- 1. 主体内容区域 -->
      <div class="content_content">
        <div class="content_content_left">
          <div class="content_content_left_top">
            <div>
              <span
                class="btn"
                @click="reload(previmgdetails.Psid, previmgdetails.id)"
                >< 上一组图</span
              >
              <span
                class="prev_btn"
                @click="reload(previmgdetails.Psid, previmgdetails.id)"
                >{{ previmgdetails.details }}</span
              >
              <span
                class="next_btn"
                @click="reload(nextimgdetails.Psid, nextimgdetails.id)"
                >{{ nextimgdetails.details }}</span
              >
              <span
                class="btn"
                @click="reload(nextimgdetails.Psid, nextimgdetails.id)"
                >下一组图></span
              >
            </div>
            <div class="content_content_img">
              <div v-for="(imgurl, imgid) of imgarr" :key="imgid">
                <img :src="imgurl" alt="" />
                <div class="imgbackground" @click="open(imgid)">
                  <img
                    src="http://qnm.hunliji.com/o_1caubml7mk9t1j9obnhis817j97.png"
                    alt=""
                  />
                </div>
              </div>
            </div>
          </div>
          <div class="content_content_left_bottom">
            <span
              class="btn"
              @click="reload(previmgdetails.Psid, previmgdetails.id)"
              ><上一组图
            </span>
            <span
              class="btn"
              @click="reload(nextimgdetails.Psid, nextimgdetails.id)"
              >下一组图>
            </span>
          </div>
          <div class="content_img_list">
            <div class="content_img_list_top">相关图集推荐</div>
            <div class="content_img_list_bottom">
              <div
                @click="reload(listitem.Psid, listitem.id)"
                v-for="(listitem, i) of listimgdetails"
                :key="i"
              >
                <div>
                  <router-link to="#">
                    <img :src="listitem.homeimgurl" alt="" />
                  </router-link>
                </div>
                <div>
                  <span>
                    <router-link to="#">{{ listitem.details }}</router-link>
                  </span>
                  <span>
                    <router-link to="#"
                      >{{ listitem.imgurlcount }}张</router-link
                    >
                  </span>
                </div>
              </div>
            </div>
          </div>
        </div>
        <div class="content_content_right">
          <div>
            <diV class="content_img_title">
              <p>图集详情</p>
              <p>图集描述:{{ imgdetails.details }}</p>
              <p>发布日期:{{ imgdetails.date }}</p>
            </diV>
            <div class="content_img_author">
              <p>发布者</p>
              <img
                src="http://qnm.hunliji.com/5961A4BDCF0D6B50BA352478E81D8AD3.jpg?imageView2/1/w/48/h/48"
                alt=""
              />
              <router-link to="#">{{ imgdetails.title }}</router-link>
            </div>
            <div class="content_img_style">
              <p>风格</p>
              <router-link v-show="imgdetails.style1" to="#">{{ imgdetails.style1 }}</router-link>
            </div>
            <div class="content_img_scene">
              <p>场景</p>
              <router-link v-show="imgdetails.sence1" to="#">{{ imgdetails.scene1 }}</router-link>
              <router-link v-show="imgdetails.scene2" to="#">{{ imgdetails.scene2 }}</router-link>
            </div>
            <div class="content_img_label1">
              <p>相关标签</p>
              <router-link to="#">{{ imgdetails.summarize }}</router-link>
            </div>
            <div class="content_img_look">
              <p>大家都在看</p>
              <ul>
                <li>
                  <span>1</span>
                  <router-link to="#">婚纱照发朋友圈说创意话语</router-link>
                </li>
                <li>
                  <span>2</span>
                  <router-link to="#">婚纱照怎样拍出来好看</router-link>
                </li>
                <li>
                  <span>3</span>
                  <router-link to="#">婚纱照怎样拍出来好看</router-link>
                </li>
                <li>
                  <span>4</span>
                  <a href="">婚纱照怎样拍出来好看</a>
                </li>
              </ul>
            </div>
            <div class="content_img_label2">
              <p>热门标签</p>
              <ul>
                <li v-for="(labelvalue, i) of labelarr" :key="i">
                  <p>
                    <router-link
                      :to="`/picturelabel/${homekeywords}/${labelvalue.Sdid}`"
                      >{{ labelvalue.title }}</router-link
                    >
                  </p>
                </li>
              </ul>
            </div>
          </div>
        </div>
      </div>
      <!-- 2. img详情弹出框 -->
      <!-- 2.1 外层背景 -->
      <div class="click_box" :class="{ show: n == 1 }">
        <!-- 2.1.1 内层内容 -->
        <div class="content_box">
          <div class="box_top">
            <div class="box_author">
              <img
                src="https://qnm.hunliji.com/FoatAIL8GGISE1Rj8_6sDklX3F1L?imageView2/1/w/48/h/48"
                alt=""
              />
              <span>贾老师</span>
            </div>
            <div class="box_close" @click="close"></div>
            <div class="box_lianjie">
              <span>分享:</span>
              <div class="box_share">
                <router-link to="#"
                  ><img
                    src="http://qnm.hunliji.com/o_1cbt7n6ehht71lvpact144qbc99.jpg"
                    alt=""
                /></router-link>
                <router-link to="#"
                  ><img
                    src="http://qnm.hunliji.com/o_1cbt7n6ehd8p1ajk1v7711rf59ua.jpg"
                    alt=""
                /></router-link>
                <router-link to="#"
                  ><img
                    src="http://qnm.hunliji.com/o_1cbt7n6eh18rv1dkp13t51h410hkb.jpg"
                    alt=""
                /></router-link>
              </div>
              <div>
                <img
                  src="http://qnm.hunliji.com/o_1caupqs8v10881ki4u5dpbc8ekc.png"
                  alt=""
                />
              </div>
              <!-- 记录喜欢功能需完善 -->
              <span>喜欢(1)</span>
            </div>
          </div>
          <div class="box_middle">
            <div class="box_middle_left">
              <div
                class="box_imgcontainer"
                :style="`width:${760 * (imgarrlength + 1)}px;margin-left:-${
                  760 * m
                }px`"
              >
                <div
                  class="box_middle_left_imgcontent"
                  v-for="(img, i) of imgarr"
                  :key="i"
                >
                  <img class="box_middle_left_imgcontent_img" :src="img"  alt="" />
                </div>
                <div class="box_middle_left_imgcontent">
                  <img class="box_middle_left_imgcontent_img" :src="imgarr[0]" alt="" />
                </div>
              </div>
              <div class="boxbtn_left" @click="translateimg(-1)"></div>
              <div class="boxbtn_right" @click="translateimg(1)"></div>
              <div class="box_imgcount">
                {{ parseInt(m) + 1 }}/{{ imgarrlength }}
              </div>
            </div>
            <div class="box_middle_right">
              <div>
                <div
                  v-for="(imgshouye, i) of boximgdetails"
                  @click="reload(imgshouye.Psid, imgshouye.id), close()"
                  :key="i"
                >
                  <img :src="imgshouye.homeimgurl" alt="" />
                </div>
              </div>
              <div class="content_img_label2 box_label">
                <p>热门标签</p>
                <ul>
                  <li v-for="(labelvalue, i) of labelarr" :key="i">
                    <p>
                      <router-link
                        :to="`/picturelabel/${homekeywords}/${labelvalue.Sdid}`"
                        >{{ labelvalue.title }}</router-link
                      >
                    </p>
                  </li>
                </ul>
              </div>
            </div>
          </div>
          <div class="box_bottom">
            <span>{{ imgdetails.title }}</span>
            <span>{{ imgdetails.style1 }}</span>
          </div>
        </div>
      </div>
    </div>
    <my-footer></my-footer>
  </div>
</template>

<style scoped>
/* 以下为弹窗box的样式 */
/* --------------------------------------------------------------------------- */
.click_box {
  position: fixed;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 999;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
}
.click_box > div div {
  /* height:10px; */
  /* border:1px solid  red; */
}
.content_box {
  width: 1000px;
  height: 725px;
  font-size: 15px;
  margin: 0 auto;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -350px;
  margin-left: -500px;
  padding: 20px;
  background: #fff;
}
.box_top,
.box_middle,
.box_lianjie {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.box_lianjie {
  line-height: 1;
  align-items: center;
  padding-right: 10px;
}
.box_lianjie > div:nth-child(3) {
  margin-left: 25px;
  margin-right: 5px;
}
.box_author img {
  border-radius: 50%;
  margin-right: 10px;
}
.box_share {
  margin-left: 18px;
}
.box_share a + a {
  margin-left: 10px;
}
.box_share img {
  width: 16px;
  height: 16px;
}
/* ----------------------- */
.box_middle_left {
  width: 760px;
  padding: 35px 0px;
  background: rgb(243, 243, 241);
  position: relative;
  overflow: hidden;
}
.box_imgcontainer {
  height: 500px;
}
.box_imgcontainer:after {
  content: "";
  display: block;
  clear: both;
}
.box_middle_left_imgcontent {
  width: 760px;
  height: 500px;
  float: left;
  line-height: 500px;
  display:table-cell;
  text-align: center;
  vertical-align: middle;
}
.box_middle_left_imgcontent_img{
  max-width: 760px;
  max-height: 499px;
}
.boxbtn_left,
.boxbtn_right {
  width: 28px;
  height: 48px;
  position: absolute;
  top: 50%;
}
.boxbtn_left {
  background: url(http://qnm.hunliji.com/o_1ccibqn0t31s1jlr90r1sviro9.png)
    no-repeat;
}
.boxbtn_right {
  right: 0px;
  background: url(http://qnm.hunliji.com/o_1ccibqn0trlvabuubv17d25bj8.png)
    no-repeat;
}
.box_imgcount {
  width: 100px;
  height: 40px;
  color: #fff;
  background-image: linear-gradient(
    to right,
    rgb(233, 231, 227),
    rgb(63, 62, 62)
  );
  opacity: 0.5;
  text-align: center;
  line-height: 1;
  padding: 10px 0px;
  position: absolute;
  bottom: 0px;
  right: 0px;
}
.box_middle_right > div:first-child > div {
  float: left;
  margin-bottom: 11px;
}
.box_middle_right > div:first-child > div:nth-child(2n) {
  margin-left: 11px;
}
.box_middle_right > div:first-child:after {
  content: "";
  display: block;
  clear: both;
}
.box_middle_right img {
  width: 80px;
  height: 80px;
}
.box_middle_right {
  width: 180px;
}
/* .box_label>div{
  margin-top:5px;
} */
/* .box_label>div:after{
  content:"";
  display:block;
  clear:both;
} */
/* .box_label>div a{
  float:left;
  padding:5px 5px;
}
.box_label>div a:nth-child(2n){
  margin-left:10px;
} */
.box_label a {
  font-size: 13px;
  display: block;
  border-radius: 5px;
  background: #f3f1f1;
  line-height: 15px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.box_bottom {
  margin-top: 15px;
}
.box_bottom span {
  padding: 5px 10px;
  background: #f3f1f1;
  border-radius: 5px;
}
.box_bottom span + span {
  margin-left: 10px;
}
.box_close {
  width: 60px;
  height: 60px;
  position: absolute;
  left: 975px;
  top: -35px;
  background: url(http://qnm.hunliji.com/o_1bopb05ne1rp713hqg5e1n3611c68.png)
    no-repeat 100% 100%;
}
.show {
  display: none;
}
/* ------------------------------------------------------------------------------ */
* {
  margin: 0px;
  padding: 0px;
  box-sizing: border-box;
}
a {
  text-decoration: none;
}
a:hover {
  color: #f00;
}
ul {
  list-style: none;
}
.content {
  width: 1200px;
  margin-bottom: 10px;
  margin: 0 auto;
  /* border:1px solid #f00; */
}
.content_breadcrumb {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
  align-items: center;
  line-height: 20px;
  /* border:1px solid #a9a4a4; */
  font-size: 10px;
  padding: 5px 0px;
}
.su_breadcrumb {
  margin: 0px;
  padding: 0px;
  list-style: none;
  display: flex;
  flex-wrap: nowrap;
  color: rgb(51, 50, 50);
}
.su_-item a {
  color: #a9a4a4;
}
.su_breadcrumb-item + .su_breadcrumb-item:before {
  content: ">";
}
.su_breadcrumb-item {
  position: relative;
}
.content_breadcrumb img {
  width: 15px;
  line-height: 20px;
  margin: 0 5px;
}
.su_breadcrumb-item > span {
  display: block;
  width: 5px;
  height: 5px;
  position: absolute;
  left: 50px;
  top: 8px;
  border: 5px solid #fff;
  border-top: 5px solid rgb(101, 99, 99);
}
/* ----------------------------------------------------------- */
/* 无效样式 */
.su_breadcrumb-item:last-child :hover .hover_span {
  border: 5px solid #fff;
  border-bottom: 5px solid rgb(101, 99, 99);
}
/* ----------------------------------------------------------- */
.content_list {
  display: none;
  position: absolute;
  top: 20px;
  left: -100px;
  padding: 15px 20px;
  background: #fff;
  border: 1px solid #dad9d9;
  z-index: 20;
}
.content_list > div {
  width: 300px;
  height: 600px;
  display: flex;
  flex-wrap: nowrap;
}
.content_list div span {
  font-size: 16px;
}
.content_list ul {
  /* width:200px; */
  height: 600px;
  padding: 10px;
  line-height: 26.5px;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: flex-start;
  align-items: flex-start;
}
.content_list > div div:first-child {
  width: 90px;
}
.content_list ul li a {
  font-size: 13px;
  color: rgb(60, 59, 59);
}
.content_list ul li a:hover {
  color: #f00;
}
.su_breadcrumb-item:last-child:hover .content_list {
  display: block;
}
.content_content {
  display: flex;
  flex-wrap: nowrap;
  justify-content: space-between;
}
.content_content_left {
  /* border:1px solid #f00; */
  width: 890px;
}
/* //解决图片布局问题(1,在此处设置元素内部布局为纵向对齐,分3列,列间距20px */
.content_content_img {
  column-count: 3;
  column-gap: 20px;
}
.content_content_img:after {
  content: "";
  display: block;
  clear: both;
}
/* 解决图片布局问题(2,此处不用考虑使用浮动只需正常设置宽度即可) */
.content_content_img > div {
  width: 280px;
  position: relative;
  margin-bottom: 20px;
}
.content_content_img > div > img {
  width: 100%;
}
.imgbackground {
  width: 100%;
  height: 100%;
  position: absolute;
  z-index: 9;
  top: 0;
  display: none;
  background: rgba(0, 0, 0, 0.5);
}
.imgbackground img {
  width: 30px;
  height: 30px;
  position: absolute;
  top: 50%;
  left: 50%;
  margin-top: -15px;
  margin-left: -15px;
}
.content_content_img > div:hover .imgbackground {
  display: block;
}

.content_content_left_bottom,
.content_content_left_top > div:first-child {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.content_content_left_top {
  padding: 20px;
  background: #f2f1f2;
}
.content_content_left_top > div:first-child {
  margin-bottom: 20px;
}
.content_content_left_top > div:nth-child(2) > div {
  flex-wrap: wrap;
  align-items: flex-start;
  /* justify-content:start; */
}
.prev_btn,
.next_btn {
  width: 220px;
  font-size: 13px;
  line-height: 15px;
  color: #928e8e;
  display: block;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  cursor: pointer;
}
.prev_btn:hover,
.next_btn:hover {
  color: red;
}
.content_content_left_bottom {
  padding: 20px;
}
.content_content a {
  color: #727272;
}
.content_content_left a {
  font-size: 10px;
}
.content_content_right > div a {
  font-size: 13px;
}
.btn {
  display: block;
  color: #9d9696;
  width: 120px;
  padding: 8px 15px;
  background: #fff;
  border: 1px solid #bbb9b9;
  text-align: center;
}
/* 声明左侧最下角4个img列表页的样式 */
/* ----------------------------------------------- */
.content_img_list {
  padding: 20px;
}
.content_img_list_top {
  padding-left: 10px;
  border-left: 3px solid #f00;
  font-size: 17px;
  margin-bottom: 20px;
}
.content_img_list_bottom {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
}
.content_img_list_bottom > div {
  width: 23%;
  border: 1px solid #bbb9b9;
}
.content_img_list_bottom > div > div {
  display: flex;
  justify-content: flex-start;
}
.content_img_list img {
  width: 100%;
  height: 120px;
}
.content_img_list_bottom span {
  line-height: 1;
  padding: 8px 2px;
  margin-left: 10px;
}
.content_img_list_bottom a {
  color: #000;
  font-size: 15px;
  line-height: 1;
  display: block;
}
.content_img_list_bottom span:first-child a {
  width: 130px;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}

/* ------------------------------------------------------ */
.content_content_right > div {
  width: 280px;
  padding: 20px 20px;
  border: 1px solid #bbb9b9;
}
.content_content_right > div ul {
  list-style: none;
}
.content_content_right > div > div {
  padding: 15px 10px;
}
.content_content_right > div > div + div {
  border-top: 1px dashed #bbb9b9;
}
.content_content_right > div p {
  margin: 10px 0px;
}
.content_img_title p:not(:first-child) {
  color: #9e9d9d;
  font-size: 13px;
}
.content_img_author {
  line-height: 20px;
}
.content_img_author img {
  border-radius: 50%;
  vertical-align: middle;
  margin-right: 10px;
}

.content_img_style a,
.content_img_scene a,
.content_img_label1 a,
.content_img_label2 a {
  line-height: 18px;
  background: #f5f5f5;
  padding: 5px;
  border-radius: 5px;
  /* margin-top:5px; */
}
.content_img_style a:hover,
.content_img_scene a:hover,
.content_img_label1 a:hover,
.content_img_label2 a:hover {
  background: #e8e8e8;
}

.content_img_look a:hover {
  color: #f00;
}
.content_img_look li {
  margin-bottom: 10px;
}
.content_img_look span {
  color: #fff;
  background: rgb(192, 191, 191);
  padding: 0.5px 5px;
}
.content_img_look li:first-child span {
  background: #f00;
}
.content_img_look li:nth-child(2) span {
  background: rgb(242, 99, 33);
}
.content_img_look li:nth-child(3) span {
  background: rgb(231, 205, 8);
}

.content_img_label2 li {
  display: inline;
  margin: 5px;
  line-height: 15px;
}
.content_img_label2 li p {
  margin: 2px auto;
}
.share_qrcode {
  position: relative;
}
.qrcode {
  /* width:100%; */

  /* height:100%; */
  position: absolute;
  z-index: 999;
  /* background:#8a8989; */
  margin: 0 auto;
  left: 800px;
}
.qrcode > div {
  width: 200px;
  height: 200px;
  /* margin-left:50%; */
  background: #fff;
}
</style>

<script>
import axios from "axios";
export default {
  props: [
    "homekeywords", //模块编号
    "detailskeywords", //id
  ],
  data() {
    return {
      imgarr: [], //图集描述
      imgdetails: {}, //图组数据详情
      previmgdetails: {}, //上一组图组数据详情
      nextimgdetails: {}, //下一组图组数据详情
      listimgdetails: [], //图组列表详情
      boximgdetails: [], //弹窗右侧显示图组
      labelarr: [], //热门标签数据
      imgarrlength: 0, //获取主加载图片数据的总长度
      m: 0, //控制弹出框左边距变量(初始化为0)
      n: 1, //控制弹出框显示变量
      label: {}, //加工过得搜索标签内层循环数据
      searcharr: [], //搜索标签外层循环数据
    };
  },
  methods: {
    // 0. 封装组件初次和再次加载分主函数(实现请求7条数据,自动判断添加展示图片数量)
    jiazai(Psid, id) {
      var arr = [];
      var i = 0;
      for (var k = 0; k <= 15; k++) {
        if (i < 7) {
          var number = parseInt(Math.random() * 195);
          if (
            number != 0 &&
            number != id &&
            number != id - 1 &&
            number != id + 1 &&
            arr.indexOf(`${number}`)
          ) {
            arr[i] = number;
            i++;
          }
        }
      }
      // console.log(arr);
      axios
        .get("/picture/picturedetail", {
          params: {
            Psid: Psid,
            id: id,
            id1: arr[0],
            id2: arr[1],
            id3: arr[2],
            id4: arr[3],
            id5: arr[4],
            id6: arr[5],
            id7: arr[6],
          },
        })
        .then((result) => {
          // console.log("这是详情页加载所需所有数据:", result.data);
          if (result.data.length == 10) {
            this.previmgdetails = result.data[0];
            this.imgdetails = result.data[1];
            this.nextimgdetails = result.data[2];
            this.listimgdetails = result.data.slice(3, 7);
            // console.log(result.data.length);
            this.boximgdetails = result.data.slice(7);
          } else {
            this.previmgdetails.details =
              "本页是第一组图片哦,想看其他的图片请点击下一组";
            this.imgdetails = result.data[0];
            this.nextimgdetails = result.data[1];
            this.listimgdetails = result.data.slice(2, 6);
            this.boximgdetails = result.data.slice(6);
            // console.log(result.data.length);
          }
          document.title=this.imgdetails.details
          // console.log("halou", this.imgdetails);
          // console.log(this.imgdetails,typeof(this.imgdetails),"这是详情页加载的数据")
          var i = 0;
          var arr1 = {};
          for (var k in this.imgdetails) {
            // console.log(i,arr1[i])
            if (k.indexOf("imageurl") != -1) {
              if (
                this.imgdetails[k] != undefined &&
                this.imgdetails[k] !== "" &&
                this.imgdetails[k] !== " "
              ) {
                arr1[i] = this.imgdetails[k];
                i++;
                // console.log(this.imgdetails[k])
              }
            }
          }
          // console.log(i);
          this.imgarrlength = i;

          // 判断添加imgurlcount属性
          // ------------------------------------------------------------
          this.listimgdetails.forEach(function (elem, i) {
            // console.log(elem)
            // var imgurlcount;
            var i = 0;
            for (var k in elem) {
              if (k.indexOf("imageurl") != -1) {
                if (elem[k] != undefined || elem[k] !== "" || elem[k] !== " ") {
                  // console.log(elem[k])
                  i++;
                }
              }
            }
            elem.imgurlcount = i;
          });
          // ------------------------------------------------------------
          this.imgarr = arr1;
          // console.log("图片路径", this.imgarr);
          // console.log(this.imgarr,typeof(this.imgarr))
        });
        
    },
    // 1. 组件初次加载执行函数(根据上一个组件传进的Psid和id调用封装好的方法进行首页加载)
    load() {
      // 1.1  重新定义变量代替路由传参的参数
      //模块编号
      var Psid = parseInt(this.homekeywords);
      //数据id
      var id = parseInt(this.detailskeywords);
      // 1.2 调动封装好的方法加载初始化数据
      this.jiazai(Psid, id);
    },
    // 2. 初始化加载热门标签
    loadsearchlabel() {
      // console.log(this.homekeywords),
        axios
          .get("/picture/picsearchlabel", {
            params: {
              Psid: `${this.homekeywords}`,
            },
          })
          .then((results) => {
            // console.log(results.data, this.labelarr);
            this.labelarr = results.data;
            // console.log("zheshi", this.labelarr);
            // console.log(this.labelarr[0][0].Psid)
          });
    },
    // 3. 点击事件重新加载页面数据
    reload(a, b) {
      // console.log(a, b);
      if (b >= 1) {
        this.jiazai(a, b);
      }
      //重新加载调用事件后执行滚动条置顶
      window.scrollTo(0, 0);
    },
    // 4. 图组详情弹出框点击切换图片
    translateimg(count) {
      // console.log(count, this.m, this.imgarrlength);
      this.m += parseInt(count);
      if (this.m > this.imgarrlength - 1) {
        this.m = 0;
      } else if (this.m < 0) {
        this.m = this.imgarrlength - 1;
      }
      // console.log(count, this.m);
    },
    // 5.0 点击图片弹出图组框
    open(imgid) {
      typeof imgid;
      this.m = parseInt(imgid);
      this.n = 0;
    },
    // 5.1 点击关闭弹出框
    close() {
      this.n = 1;
    },
    // 6. 动态加载模块搜索标签
    jiazailabel() {
      var labelapi;
      // 0. 判断上一级组件传递参数确定请求数据表
      if (this.homekeywords == 0) {
        labelapi = "/piclabel";
      } else if (this.homekeywords == 1) {
        labelapi = "/arrlabel";
      } else if (this.homekeywords == 2) {
        labelapi = "/clolabel";
      } else if (this.homekeywords == 3) {
        labelapi = "follabel";
      }
      axios
        .get(
          // 此处需根据组价跳转传参进行判断数据接口名称,
          // 暂时使用婚纱照数据标签表接口
          `/picture${labelapi}`
        )
        .then((result) => {
          // console.log(result.data, typeof result.data);
          this.label = result.data;
          // 根据接口返回值在此处使用for of 遍历数组内部对象,将对象中前几位不需要加载的值进行过滤,最终将遍历产生新对象推入数组内,产生过滤之后的数组(只包含标签类型值的新数组)以供标签栏内部小标签进行v-for来使用
          // 外层遍历,产生数组内单个对象
          for (var k of this.label) {
            var i = 0;
            var arr2 = {};
            // 内层循环使用新对象接收旧对象特定位置参数
            for (var n in k) {
              // 使用 外层变量i来控制所需属性值位置,&&之后表示对为空的属性值进行过滤
              if (i > 3 && k[n] !== "" && k[n] !== " ") {
                arr2[i] = k[n];
                // console.log(i,k,n,k[n])
              }
              i++;
            }
            // 将每次遍历产生的对象推入数组内
            this.searcharr.push(arr2);
            // console.log("这是查询标签标签的数据:", this.searcharr, this.label);
          }
        });
    },
    // 7. 生成分享二维码
    loadqrcode() {
      const url = this.$route;
      // console.log(url);
      var qrcode = new QRCode(document.getElementById("qrcode"), {
        width: 178,
        height: 178,
        colorDark: "#aa0000",
        colorLight: "#aaffff",
        correctLevel: QRCode.CorrectLevel.H,
      });
      qrcode.makeCode(`http://127.0.0.1:5050/v1/picture${url}`);
    },
  },
  mounted() {
    window.scrollTo(0, 0);
    this.load();
    this.loadsearchlabel();
    this.jiazailabel();
    this.loadqrcode();
  },
};
</script>
